<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        没有防抖的input 
        <input 
        type="text" 
        id="unDebounce" 
        placeholder="请输入您要搜索的用户名"
        >
    </div>
    <div>
        防抖后的input 
        <input 
        type="text" 
        id="debounce" 
        placeholder="请输入您要搜索的用户名"
        >
    </div>
    <script>
        // 不加防抖的
        const inputa = document.getElementById("unDebounce");
        const inputb = document.getElementById("debounce");

        function handleNameSearch(e) {
            // console.log(e.target.value);
            const value = e.target.value;
            fetch('http://localhost:3000/users')
            .then(res=>res.json())
            .then(data=>{
                // console.log(data);
                const users = data;
                // 数组上es6的新方法，map 转换，filter 过滤
                // callback filter的回调函数：返回一个真值以将元素保留在结果数组中，否则返回一个假值
                const filterUsers = users.filter(user => {
                    // console.log(user);
                    // 字符串中的新方法
                    // 可读性更好 es6 字符串新增方法
                    return user.name.includes(value)
                    // return user.name.indexOf(value) !== -1
                })
                console.log(filterUsers);
            })
        }
        // 闭包功能函数
        function debounce(func, delay) {
            // 返回值必须得是函数  keyup 事件处理函数
            // let id;
            return function(args){
                clearTimeout(func.id)
                // 函数是对象，id 挂在func上 func 是闭包中的自由变量
                func.id = setTimeout(function(){
                    func(args)
                }, delay)
            }
        }
        // 
        const debounceNameSearch = debounce(handleNameSearch, 500)

        inputa.addEventListener('keyup',handleNameSearch)
        inputb.addEventListener('keyup', debounceNameSearch)
    </script>
</body>
</html>